<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
 <meta charset="utf-8" />
 <title>DeathGhost-产品分类页面</title>
 <meta name="keywords" content="DeathGhost,DeathGhost.cn,web前端设,移动WebApp开发" />
 <meta name="description" content="DeathGhost.cn::H5 WEB前端设计开发!" />
 <meta name="author" content="DeathGhost"/>
 <link href="/style/style.css" rel="stylesheet" type="text/css" />
 <script type="text/javascript" src="/js/public.js"></script>
 <script type="text/javascript" src="/js/jquery.js"></script>
    <script type="text/javascript" src="/js/jqpublic.js"></script>

 <script src="/js/vue.js"></script>
 <script src="/js/axios.min.js"></script>
 <!--
 Author: DeathGhost
 Author URI: http://www.deathghost.cn
 -->
</head>
<body>
<header class="header">


</header>
<script>

 $('.header').load('/header.html',function(responseTxt,statusTxt,xhr){
  console.log('responseTxt,statusTxt,xhr')

 })

</script>
<div id="app">
<!--Start content-->
<section class="Psection">
 <section class="fslist_navtree">
  <ul class="select">
   <li class="select-list">
    <dl id="select1">
     <dt>位置：</dt>
     <dd class="select-all selected"><a href="javascript:" @click="getDefault()">全部</a></dd>
     <dd v-for="region in regions"><a href="javascript:" @click="getBySite(region.id)">{{region.region}}</a></dd>
    </dl>
   </li>
   <li class="select-result">
    <dl>
     <dd class="select-no">已选择：</dd>
    </dl>
   </li>
  </ul>
 </section>
 <!--<section class="Fslmenu">
  <a href="#" title="默认排序">
  <span>
  <span>默认排序</span>
  <span></span>
  </span>
  </a>
  <a href="#" title="评价">
  <span>
  <span>评价</span>
  <span class="s-up"></span>
  </span>
  </a>
  <a href="#" title="销量">
  <span>
  <span>销量</span>
  <span class="s-up"></span>
  </span>
  </a>
  <a href="#" title="价格排序">
  <span>
  <span>价格</span>
  <span class="s-down"></span>
  </span>
  </a>
  <a href="#" title="发布时间排序">
  <span>
  <span>发布时间</span>
  <span class="s-up"></span>
  </span>
  </a>
 </section>-->
 <section class="Fsl">
  <ul>
   <li v-for="shop in page.records">
    <a :href="'/shop/goShop/'+shop.id" target="_blank" :title="shop.name"><img :src="shop.picture"></a>
    <hgroup>
     <h3 :text="shop.name"></h3>
     <h4></h4>
    </hgroup>
    <p>商铺名：{{shop.name}}</p>
    <p>商铺地址：{{shop.address}}</p>
    <p>联系电话：{{shop.phone}}</p>
    <p>
    <span class="Score-l">
    <img src="/images/star-on.png">
    <img src="/images/star-on.png">
    <img src="/images/star-on.png">
    <img src="/images/star-on.png">
    <img src="/images/star-off.png">
    <span class="Score-v">4.8</span>
    </span>
     <span class="DSBUTTON"><a :href="'/shop/goShop/'+shop.id" target="_blank" class="Fontfff">开始点菜</a></span>
    </p>
   </li>
  </ul>
  <aside>
   <div class="title">热门商家</div>
   <div class="C-list">
    <a  target="_blank" title="店铺名称"><img src="/upload/cc.jpg"></a>
    <p><a  target="_blank">[大雁塔]店铺名称</a></p>
    <p>
     <span>人均：20~50元</span>
     <span style=" float:right">
    <img src="/images/star-on.png">
    <img src="/images/star-on.png">
    <img src="/images/star-on.png">
    <img src="/images/star-on.png">
    <img src="/images/star-off.png">
    <span class="ALscore">4.8</span>
   </span>
    </p>
   </div>
   <div class="C-list">
    <a  target="_blank" title="店铺名称"><img src="/upload/cc.jpg"></a>
    <p><a  target="_blank">[大雁塔]店铺名称</a></p>
    <p>
     <span>人均：20~50元</span>
     <span style=" float:right">
    <img src="/images/star-on.png">
    <img src="/images/star-on.png">
    <img src="/images/star-on.png">
    <img src="/images/star-on.png">
    <img src="/images/star-off.png">
    <span class="ALscore">4.8</span>
   </span>
    </p>
   </div>
  </aside>
  <div class="TurnPage" id="t1">
   <a href="javascript:">
    <span v-if="page.current != 1" class="Prev" @click="firstPage()"><i></i>首页</span>
   </a>
   <a v-if="page.current != 1" href="javascript:"><span class="PNumber" @click="lastPage()">上一页</span></a>
   <a v-for="p in page.pages" href="javascript:;" >
    <span v-if="p == page.current" class="PNumber"><font color="#dc143c">{{p}}</font></span>
    <span v-if="p != page.current" class="PNumber" @click="goPage(p)">{{p}}</span>
   </a>
   <a v-if="page.current != page.pages && page.total != 0" href="javascript:"><span class="PNumber" @click="nextPage()">下一页</span></a>
   <a href="javascript:">
    <span v-if="page.current != page.pages && page.total != 0" class="Next" @click="endPage()">尾页<i></i></span>
   </a>
  </div>
 </section>
</section>

<footer>
 <section class="Otherlink">
  <aside>
   <div class="ewm-left">
    <p>手机扫描二维码：</p>
    <img src="/images/Android_ico_d.gif">
    <img src="/images/iphone_ico_d.gif">
   </div>
   <div class="tips">
    <p>客服热线</p>
    <p><i>1830927**73</i></p>
    <p>配送时间</p>
    <p><time>09：00</time>~<time>22:00</time></p>
    <p>网站公告</p>
   </div>
  </aside>
  <section>
   <div>
    <span><i class="i1"></i>配送支付</span>
    <ul>
     <li><a th:href="article_read.html" target="_blank" title="标题">支付方式</a></li>
     <li><a th:href="article_read.html" target="_blank" title="标题">配送方式</a></li>
     <li><a th:href="article_read.html" target="_blank" title="标题">配送效率</a></li>
     <li><a th:href="article_read.html" target="_blank" title="标题">服务费用</a></li>
    </ul>
   </div>
   <div>
    <span><i class="i2"></i>关于我们</span>
    <ul>
     <li><a th:href="article_read.html" target="_blank" title="标题">招贤纳士</a></li>
     <li><a th:href="article_read.html" target="_blank" title="标题">网站介绍</a></li>
     <li><a th:href="article_read.html" target="_blank" title="标题">配送效率</a></li>
     <li><a th:href="article_read.html" target="_blank" title="标题">商家加盟</a></li>
    </ul>
   </div>
   <div>
    <span><i class="i3"></i>帮助中心</span>
    <ul>
     <li><a th:href="article_read.html" target="_blank" title="标题">服务内容</a></li>
     <li><a th:href="article_read.html" target="_blank" title="标题">服务介绍</a></li>
     <li><a th:href="article_read.html" target="_blank" title="标题">常见问题</a></li>
     <li><a th:href="article_read.html" target="_blank" title="标题">网站地图</a></li>
    </ul>
   </div>
  </section>
 </section>
 <div class="copyright">© 版权所有 2016 DeathGhost 技术支持：<a href="http://www.deathghost.cn" title="DeathGhost">DeathGhost</a></div>
</footer>
</div>
</body>
<script>
 new Vue({
  el: "#app",
  data(){
   return {
    regions: [],
    page: [],
    //当前页码
    current: 0,
    rid: 0,
   }
  },
  methods: {
   //跳转首页
   firstPage() {
    this.current = 1;
    this.getShopList();
   },
   //上一页
   lastPage(){
    this.current = this.current - 1;
    this.getShopList();
   },
   goPage(p){
    this.current = p;
    this.getShopList();
   },
   nextPage(){
    this.current = this.current + 1;
    this.getShopList();
   },
   //尾页
   endPage(){
    this.current = this.page.pages;
    this.getShopList();
   },
   //根据位置查询商铺
   getBySite(s){
    this.rid = s;
    this.current = 1;
    this.getShopList();
   },
   //去除地区条件返回原始商铺列表
   getDefault(){
    this.rid = 0;
    this.current = 1;
    this.getShopList();
   },
   getShopList(){
    axios.get("/shop/shopList?current="+this.current+"&rid="+this.rid).then(r => {
     if(r.data.code === 200){
      this.page = r.data.data[1];
     }
    })
   }
  },
  mounted: function () {
   axios.get("/shop/shopList?current=0").then(r => {
    if(r.data.code === 200){
     this.regions = r.data.data[0];
     this.page = r.data.data[1];
    }
   })
  }
 });
</script>
</html>
